<template>
  <el-table-column align="center" v-if="!column.hide" :sortable="column.sortable ? 'custom' : false" :prop="column.prop" :fixed="column.fixed" :label="column.label" :width="column.width">
    <template #default="scope" v-if="column.render || column.children">
      <img v-if="column.render == 'img'" class="imgSet" :src="scope.row[column.prop]" alt="" :style="column.style" />
      <template v-else-if="column.render == 'Viewimg'">
        <el-image v-for="(item, index) in JSON.parse(scope.row[column.prop] || '')" :key="index + 'a'" fit="scale-down" :style="column.style || 'width:80px; height:80px'" :src="item.url" :preview-teleported="true" :preview-src-list="handleImg(scope.row[column.prop])"> </el-image>
      </template>
      <div v-else-if="column.render == 'html'" v-html="scope.row[column.prop]"></div>
      <div v-else-if="column.render == 'long'" class="long">{{ scope.row[column.prop] }}</div>
      <div v-else-if="column.render == 'params'">{{ getParams() }}</div>
      <div v-else-if="column.render == 'timeStamp'">{{ scope.row[column.prop] ? parseTime(scope.row[column.prop], column.tFormat || "") : "" }}</div>
      <slot name="otherColumn" :row="scope.row" :column="column" :index="scope.$index"></slot>
      <el-table-column align="center" v-for="(columnc, i) in column.children" :key="'D' + i" :sortable="columnc.sortable == 'custom' ? 'custom' : !columnc.sortable ? false : true" :prop="columnc.prop" :fixed="columnc.fixed" :label="columnc.label" :width="columnc.width">
        <template #default="scope" v-if="columnc.render">
          <slot name="childOtherColumn" :row="scope.row" :columnc="columnc"></slot>
        </template>
      </el-table-column>
    </template>
    <template #header v-if="column.hasHeader"> <slot name="header"></slot> </template>
  </el-table-column>
</template>
<script setup lang="ts">
import { parseTime } from "@/assets/utils";
const props = defineProps<{ column: columnType; id?: string }>();
defineOptions({ name: "Column" });
function getParams() {
  let obj = props.column["Object"].find((item) => {
    return props.column.prop == item.isKey;
  });
  return obj.isValue;
}
function handleImg(e: string) {
  let arr: { url: string }[] = JSON.parse(e);
  let arr1: string[] = [];
  arr.map((ite) => {
    arr1.push(ite.url);
  });
  return arr1;
}
</script>

<style scoped lang="scss">
.long {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.imgSet {
  height: 80px;
  width: 80px;
  object-fit: scale-down;
  display: block;
  margin: 0 auto;
}
</style>
